<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>角色列表</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
<div class="layui-btn-group demoTable" style="margin: 5px">
    <button class="layui-btn" id="role_add"><i class="layui-icon"></i>新增</button>
</div>

<table id="roleList" lay-filter="roleList"></table>

</body>
<script type="text/html" id="barRole">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:src="@{/static/layui/layui.all.js}"></script>
<script type="text/javascript" th:inline="javascript">
    // <![CDATA[
    var ctxPath = /*[[@{/}]]*/ '';
    layui.use('table', function(){
        var table = layui.table,form = layui.form;

        table.render({
            elem: '#roleList',
            height: 700,
            page: true, //开启分页
            url: ctxPath + '/role/pageList',
            cols: [[ //表头
                {type:'numbers',fixed: 'left'},
                {type: 'checkbox',fixed: 'left'},
                {field: 'roleCode',align:'center', title: '角色编码',fixed: 'left'},
                {field: 'roleName',align:'center', title: '角色名称'},
                {field: 'memo',align:'center', title: '描述', sort: true},
                {fixed: 'right',align:'center', toolbar: '#barRole'}
            ]]
        });

        //监听工具条
        table.on('tool(roleList)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.open({
                    title: '人员查看',
                    type: 2,
                    area: ['500px', '600px'],
                    content: ctxPath + '/user/toView/' + data.id,
                    end:function(){
                        table.reload('roleList');
                    }
                });
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(){
                    obj.del();
                    layui.$.ajax({
                        type: "delete",
                        async: false,
                        url: ctxPath + "/role/delete/" + data.id,
                        success:function(data){
                            if(data.status){
                                table.reload('roleList');
                                layer.msg('删除成功!');
                            }else{
                                layer.msg(data.message);
                            }
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    title: '人员修改',
                    type: 2,
                    area: ['500px', '600px'],
                    content: ctxPath + '/user/toUpdate/' + data.id,
                    end:function(){
                        table.reload('roleList');
                    }
                });
            }
        });

        //监听锁定操作
        form.on('checkbox(lockDemo)', function(obj){
            layui.$.post({
                url: ctxPath + "/user/updateAttr",
                data:'id=' + this.value + '&name=' + this.name + '&value=' + obj.elem.checked + '',
                success:function (data) {
                    if(data.status){
                        layer.msg("成功");
                    }else {
                        layer.msg("失败");
                    }
                }
            });

        });

        /**
         * 角色新增
         */
        layui.$('#role_add').on('click', function(){

            layer.open({
                title: '人员新增',
                type: 2,
                area: ['500px', '600px'],
                content: ctxPath + '/role/toAdd',
                end:function(){
                    table.reload('roleList');
                }
            });
        });

    });

    // ]]>

</script>
</html>